<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>结婚邀请函</title>
    <meta name="viewport" content="width=750,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="css/gobal.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
    <script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
</head>

<body>
    <div class="content_wrap">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--swiper-slide 1    -->
                <div class="swiper-slide">
                    <div class="p1  ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s">张文帮&nbsp;&nbsp;&amp;&nbsp;&nbsp;程春霞</div>
                    <div class="p2  ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="1.2s">Wedding Invitation</div>
                    <div style="padding-top:40px;text-align: center;">
                        <img src="images/s1.png" alt="" class="font1  ani" swiper-animate-effect="flipInY" swiper-animate-duration="1.4s" swiper-animate-delay="1.9s" />
                    </div>
                    <div class="d_p">
                        <p class="p3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="3.5s"><span>2019年1月31日</span></p>
                        <p class="p4 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="4.5s">安徽省铜陵市云龙村古口组</p>
                    </div>
                    <!-- <div class="slide_down">
                        <img src="images/slide.png" />
                    </div> -->

                </div>
                <!--swiper-slide 2    -->
                <!-- <div class="swiper-slide">
                    <img class="slide2_header" src="images/slide2_header.png" alt="" />

                    <img class="moon  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.4s" swiper-animate-delay="0.5s" src="images/slide2_moon.png" alt="" />
                    <img class="fanzi" src="images/slide2_fanzi.png" alt="" />
                    <div class="font">
                        <img src="images/slide_font1.png" alt="" class="font1  ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.4s" swiper-animate-delay="1.9s" />
                        <img src="images/slide2_font2.png" alt="" class="font2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.4s" swiper-animate-delay="1.9s" />
                        <img src="images/slide_zhongqiu.png" alt="" class="font3  ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.4s" swiper-animate-delay="1.9s" />
                    </div>
                    <div class="slide_down">
                        <img src="images/slide.png" />
                    </div>
                </div> -->






            </div>


        </div>
        <div id="audio" class="rotate">
            <audio src="video/MP3.mp3"></audio>
        </div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper-container', {

            direction: 'vertical',
            loop: false,
            pagination: '.swiper-pagination',
            touchRatio: 1,
            onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function(swiper) {
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        })


        $("#audio audio")[0].play();
        $("#audio").click(function() {
            if ($(this).hasClass("rotate")) {
                $(this).removeClass("rotate");
                $("audio", this)[0].pause();

            } else {
                $("audio", this)[0].play();
                $(this).addClass("rotate")

            }
        })

        var breath = function() {
            $(".slide_down").stop().animate({
                'bottom': '52px'
            }, 0).animate({
                'bottom': '72px'
            }, 700).delay(2000).animate({
                'bottom': '52px'
            }, 400);
        };
        breath();
        setInterval('breath()', 1000);
    </script>
</body>

</html>